<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门</title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
     <script type="importmap">
      {
        "imports": {
          "three": "https://threelab.cn/threejs/build/three.module.js",
          "three/addons/": "https://threelab.cn/threejs/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three"; 
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

      import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
      import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
      import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
      import { OutputPass } from "three/addons/postprocessing/OutputPass.js";

      

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(15, 15, 15);

      const renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      const controls = new OrbitControls(camera, renderer.domElement);

      controls.enableDamping = true;

      controls.dampingFactor = 0.02;

      // 后期处理
      const composer = new EffectComposer(renderer);

      const renderPass = new RenderPass(scene, camera);

      composer.addPass(renderPass);

      // 轮廓
      const outlinePass = new OutlinePass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        scene,
        camera
      );

      composer.addPass(outlinePass);

      // 色彩校正
      const outputPass = new OutputPass();

      composer.addPass(outputPass);

      // 渲染
      animate();

      function animate() {
        requestAnimationFrame(animate);

        controls.update();

        composer.render();
      }

      // 适配
      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      // 点击事件

      const raycaster = new THREE.Raycaster();

      window.addEventListener("click", (event) => {
        const mouse = new THREE.Vector2(
          (event.offsetX / event.target.clientWidth) * 2 - 1,

          -(event.offsetY / event.target.clientHeight) * 2 + 1
        );

        raycaster.setFromCamera(mouse, camera);

        const intersects = raycaster.intersectObjects(scene.children);

        if (intersects.length > 0)
          outlinePass.selectedObjects = [intersects[0].object];
        else outlinePass.selectedObjects = [];
      });

      // 辅助
      scene.add(new THREE.AxesHelper(500), new THREE.GridHelper(100, 20));

      // 物体
      for (let i = 0; i < 10; i++) {
        const geometry = new THREE.BoxGeometry();

        const material = new THREE.MeshBasicMaterial({
          color: 0x00ff00 * Math.random(),
        });

        const cube = new THREE.Mesh(geometry, material);

        cube.position.x = Math.random() * 10;

        cube.position.y = Math.random() * 10;

        cube.position.z = Math.random() * 10;

        scene.add(cube);
      }
    </script>
  </body>
</html>
